<template>
    <div class="subject_detail">
        <div v-if="columnPage">
            <van-nav-bar title="現職人數" left-arrow @click-left="onClickLeft">
                <template #right>
                    <div>自選</div>
                    <van-popover
                        v-model:show="showPopover"
                        placement="left-start"
                        :actions="actions"
                    >
                        <template #reference>
                            <van-icon size="1.5rem" name="info-o" />
                        </template>
                    </van-popover>
                </template>
            </van-nav-bar>
            <van-row>
                <van-col
                    span="5"
                    v-for="item in timeRange"
                    :key="item.value"
                    @click="selectBtn(item.value)"
                >
                    <div class="select_btn" :class="{ btn_active: btnActive === item.value }">
                        {{ item.label }}
                    </div>
                </van-col>
                <van-col span="5" @click="handleCustomTime"><div>自定時間</div></van-col>
            </van-row>
            <van-row>
                <van-col span="5" @click="selectHistory"><div>歷史趨勢</div></van-col>
            </van-row>
        </div>
        <div v-else>
            <van-nav-bar left-arrow @click-left="onClickLeft">
                <template #title>
                    <div class="row_title">
                        <div>現職人數</div>
                        <div>自選</div>
                    </div>
                </template>
                <template #right>
                    <van-row>
                        <van-col
                            span="6"
                            v-for="item in timeRange"
                            :key="item.value"
                            @click="selectBtn(item.value)"
                        >
                            <div
                                class="select_btn"
                                :class="{ btn_active: btnActive === item.value }"
                            >
                                {{ item.label }}
                            </div>
                        </van-col>
                        <van-col span="6" @click="handleCustomTime"><div>自定時間</div></van-col>
                    </van-row>
                    <!-- <van-row>
                <van-col span="5"><div>歷史趨勢</div></van-col>
            </van-row> -->
                    <van-icon size="1.5rem" name="info-o" />
                </template>
            </van-nav-bar>
        </div>
        <my-chart
            v-if="type === '0'"
            style="flex: 1"
            chartId="0101-02"
            :type="echartType"
            :direction="direction"
            :params="{ year: '2023' }"
        ></my-chart>
        <component v-else :is="currentCom" :data="chartData"></component>
        <!-- <van-icon class="legend" name="setting-o" /> -->
        <van-tabbar v-model="tabbarActive" active-color="#323233">
            <van-tabbar-item icon="home-o"></van-tabbar-item>
            <van-tabbar-item icon="search" @click="showTimePicker = true"></van-tabbar-item>
            <van-tabbar-item icon="friends-o" @click="toOrgSelect"></van-tabbar-item>
            <van-tabbar-item icon="setting-o" @click="showScopePicker = true"></van-tabbar-item>
            <van-tabbar-item icon="star-o" @click="rotatePage"></van-tabbar-item>
        </van-tabbar>
        <van-calendar
            v-model:show="showCalender"
            allow-same-day
            type="range"
            @confirm="calenderConfirm"
            :min-date="minDate"
            :max-date="maxDate"
        />
        <van-popup v-model:show="showTimePicker" round position="bottom">
            <van-picker
                v-model="timeType"
                :columns="timeTypeList"
                @cancel="showTimePicker = false"
                @confirm="timePickerConfirm"
            />
        </van-popup>
        <van-popup v-model:show="showScopePicker" round position="bottom">
            <van-picker
                v-model="scopeType"
                :columns="scopeTypeList"
                @cancel="showScopePicker = false"
                @confirm="scopePickerConfirm"
            />
        </van-popup>
    </div>
</template>

<script setup>
import { reactive, ref, markRaw, defineAsyncComponent, onMounted, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import MyChart from '@/components/common/MyChart.vue';
import dayjs from 'dayjs';
import { events } from '../utils/bus';

onMounted(() => {
    events.on('orgSelect', (e) => {
        console.log(e);
    });
});

const tabbarActive = ref(0);
const router = useRouter();
const route = useRoute();
const detailId = route.params.detailId;
const { type, echartType, direction } = route.query;
const onClickLeft = () => {
    router.back();
};
const timeRange = reactive([
    {
        label: '全部歷史',
        value: 0
    },
    {
        label: '未來三年',
        value: 1
    },
    {
        label: '未來五年',
        value: 2
    }
]);
const btnActive = ref(0);
const selectBtn = (value) => {
    btnActive.value = value;
};
const selectHistory = () => {};

// 0是图表，1是自定义组件
const currentCom =
    type === '1'
        ? markRaw(
              defineAsyncComponent(() =>
                  import(`./detail${detailId.substring(0, 4)}/Detail${detailId}.vue`)
              )
          )
        : '';

//#region 請求
let chartData = ref(null);
const getData = async () => {
    const data = await [];
    chartData.value = data;
};
getData();
//#endregion

//#region 日麗邏輯
const showCalender = ref(false);
const calenderConfirm = (values) => {
    let [start, end] = values;
    start = dayjs(start).format('YYYY-MM-DD');
    end = dayjs(end).format('YYYY-MM-DD');
    showCalender.value = false;
    console.log(start, end);
};
const handleCustomTime = () => {
    showCalender.value = true;
};

const minDate = new Date(1999, 0, 1);
const maxDate = new Date();
//#endregion

//#region 時間類型選擇
const showTimePicker = ref(false);
const timeType = ref([0]);
const timeTypeList = [
    {
        text: '日',
        value: 0
    },
    {
        text: '星期',
        value: 1
    },
    {
        text: '月份',
        value: 2
    },
    {
        text: '季度',
        value: 3
    },
    {
        text: '半年',
        value: 4
    }
];
const timePickerConfirm = (e) => {
    console.log(timeType.value);
    showTimePicker.value = false;
};
//#endregion

//#region 範疇類型選擇
const showScopePicker = ref(false);
const scopeType = ref([0]);
const scopeTypeList = [
    {
        text: '專業培訓',
        value: 0
    },
    {
        text: '綜合培訓',
        value: 1
    },
    {
        text: '語言及寫作培訓',
        value: 2
    }
];
const scopePickerConfirm = (e) => {
    console.log(scopeType.value);
    showScopePicker.value = false;
};
//#endregion

//#region 跳轉組織選擇
const toOrgSelect = () => {
    router.push({
        path: '/orgSelect'
    });
};
//#endregion

//#region 提示
const showPopover = ref(false);
// 通过 actions 属性来定义菜单选项
const actions = [{ text: '標題提示' }];
//#endregion

//#region 橫豎屏切換
const columnPage = ref(true);
const rotatePage = () => {
    const el = document.getElementById('app');
    let width = el.clientWidth,
        height = el.clientHeight;
    //在竖屏状态我们通过添加transform:rotate(90deg)，来让这个页面横过来
    if (width < height) {
        //竖屏状态
        el.style.webkitTransform = el.style.transform = `rotate(90deg)`;
        el.style.width = `${height}px`;
        el.style.height = `${width}px`;
        el.style.webkitTransformOrigin = el.style.transformOrigin = `${width / 2}px center`;
        columnPage.value = false;
    } else {
        //横屏状态
        el.style.webkitTransform = el.style.transform = `rotate(0)`;
        el.style.width = `${height}px`;
        el.style.height = `${width}px`;
        columnPage.value = true;
    }
};
//#endregion
</script>

<style lang="scss" scoped>
.subject_detail {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    .legend {
        position: fixed;
        left: 10px;
        bottom: 60px;
    }
    .select_btn {
        text-align: center;
    }
    .btn_active {
        background: green;
    }
    .row_title {
        display: flex;
        gap: px(10);
    }
}
:deep .van-nav-bar {
    .van-nav-bar__title {
        margin-left: px(50);
    }
}
</style>
